<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="cdy">
    <title>购物车</title>
    <script src="../../js/vue.js"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .buyCar {
        width: 600px;
        /* height: 40px; */
        margin: 50px auto;
    }

    .item {
        background-color: #000;
        color: wheat;
        text-align: center;
        line-height: 40px;
        float: left;
        width: 100px;
        height: 40px;
    }

    .tr button {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .tr button span {
        display: block;
    }

    .tr input {
        width: 25px;
        text-align: center;
        outline: none;
    }

    .del {
        cursor: pointer;
    }

    .del:hover {
        color: tomato;
    }

    .box {
        width: 200px;
    }
</style>

<body>
    <div id="app">
        <div class="buyCar">
            <div class="tr">
                <div class="item">
                    <label><input type="checkbox" @change="checkall" :checked="checkAll">全选</label>
                </div>
                <div class="item">商品名称</div>
                <div class="item">商品价格</div>
                <div class="item">商品数量</div>
                <div class="item">小计</div>
                <div class="item">操作</div>
            </div>
            <div class="tr" v-for="item in list" :key="item.id">
                <div class="item">
                    <input type="checkbox" v-model="item.checked">
                </div>
                <div class="item">{{item.msg}} </div>
                <div class="item">{{item.price}}</div>
                <div class="item">
                    <button><span v-show="item.num>1" @click="calc(item,-1)">-</span></button>
                    <input type="text" v-model="item.num" @input="input(item.num)">
                    <button @click="calc(item,1)">+</button>
                </div>
                <div class="item">{{(item.price*item.num).toFixed(2)}}</div>
                <div class="item del" @click="del(item.id)">删除</div>
            </div>
            <div class="tr">
                <div class="item del box" @click="cler">删除全部</div>
                <div class="item box">所有选中数量
                    <span>{{allnum}}</span>
                </div>
                <div class="item box">所有选中价格
                    <span>{{allprice}}</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            checkAll: false,
            inputReg: /^[1-9][\d]{0,1}$/,
            allnum: 0,
            allprice: 0.00,
            list: [
                {id: 1, value: 1, checked: false, msg: "商品名称一", price: 100, num: 10},
                {id: 2, value: 2, checked: false, msg: "商品名称二", price: 120, num: 1},
                {id: 3, value: 3, checked: false, msg: "商品名称三", price: 80, num: 1},
                {id: 4, value: 4, checked: false, msg: "商品名称四", price: 200, num: 3}
            ]
        },
        methods: {
            calc(item, n) { //加减
                item.num = item.num * 1 + n;
            },
            del(id) { //单删
                console.log(id);
                this.list = this.list.filter(item => item.id != id);
            },
            checkall() { //全选
                let flag = window.event.target.checked;
                this.checkAll = flag;
                this.list.forEach(item => {
                    return item.checked = flag;
                });
            },
            cler() { //全部删除
                this.list = this.list.filter(item => !item.checked);
            }
            // input(n) {
            //     console.log(n);
            //     if (!this.inputReg.test(n)) {
            //         return false;
            //     }
            // }
        },
        watch: {
            list: {
                deep: true, //深度监听
                handler(newList) {
                    if (newList.length) {
                        this.checkAll = this.list.every(item => item.checked); //反选
                        var n = 0;
                        var p = 0;
                        this.list.forEach(item => { //所有数量和价格
                            if (item.checked) {
                                n += item.num * 1;
                                p += (item.price * item.num);
                            }
                        })
                    } else {
                        this.checkAll = false;
                    }
                    this.allnum = n;
                    this.allprice = p.toFixed(2);
                }
            }
        }
    })
</script>

</html>